<template>
  <!-- 心愿，祝福，表白的模板 -->
  <div>
    <div class="list">
      <div class="cut" @click="cutTem">
        <i class="el-icon-rank"></i>
        {{templateType?'切换为标准色':'切换为浪漫色'}}
      </div>
      <!-- 列表展示组件 这里分为浪漫色和标准色 -->
      <!-- 浪漫色 -->
      <Wall v-if="templateType" :worksData="wallsData"></Wall>
      <!-- 标准色 -->
      <Works v-else :worksData="wallsData"></Works>
    </div>
  </div>
</template>

<script>
// 引入子组件
import Wall from "@/views/wall/index.vue";
import Works from "@/views/works/index.vue";
export default {
  props: ["wallsData"],
  data() {
    return {
      templateType: true, //默认为浪漫色，可以切换标准色
    };
  },
  methods: {
    cutTem() {
      this.templateType = !this.templateType;
    },
  },
  components: {
    Wall,
    Works,
  },
};
</script>

<style lang="less" scoped>
// 列表展示区域
.list {
  position: relative;
  .cut {
    position: absolute;
    right: 0;
    top: -36px;
    color: #008c8c;
    cursor: pointer;
  }
}
</style>